<html>

<head>

<title>阿瓦隆</title>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link href="lib/element-ui/index.min.css" rel="stylesheet">
<link href="lib/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="common.css" rel="stylesheet">

<script src="lib/vue/vue.min.js"></script>
<script src="lib/element-ui/index.min.js"></script>

<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/seedrandom/seedrandom.min.js"></script>

<script src="lib/url.js"></script>

<script src="common.js"></script>
<script src="game.js?v=20201208"></script>

<style>
	.good{
		color: blue;
	}
	.bad{
		color: red;
	}
	.me {
		background-color: #CCC;
	}
</style>

</head>

<body>

<div id="app" class="container" style="padding-bottom: 10px">
	<template v-if="!InGame">
		<select-role/>
	</template>
	<template v-else>
		<game/>
	</template>
</div>

<template id="template-select-role">
	<div>
		<h1>房间号：{{Room}}</h1>
		<hr/>
		
		<div class="text-center">
			请选择自己的角色编号：
			<el-row>
				<el-radio-group v-model="SelectedRole">
				  <el-radio-button :label="i" v-for="i in (Board.Good + Board.Bad)"></el-radio-button>
				</el-radio-group>
			</el-row>
			<el-row>
				<el-button type="success" v-if="SelectedRole" style="width:100%" v-on:click="SelectRole">确定</el-button>
			</el-row>
		</div>
	</div>
</template>

<template id="template-game">
	<div>
		<h1>房间号：{{Room}}</h1>
		<h1>角色：{{Role}}</h1>
		<h1>第{{Turn}}局</h1>
		<div class="text-right">
			<a href="index.html">退出</a>
		</div>
		<hr/>
		
		<div>
		<h3>首轮队长：{{Leader}}</h3>
		<h3 class="good">好人方：<template v-for="item in GoodRoles">{{item}} </template></h3>
		<h3 class="bad">坏人方：<template v-for="item in BadRoles">{{item}} </template></h3>
		<h3 style="font-weight:bold">我的身份：<span :class="{good: IsGood(MyRole), bad: IsBad(MyRole)}">{{MyRole}}</span></h3>
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>玩家</th>
					<th style="width:90px">已知身份</th>
					<th style="width:180px">抿身份</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, i) in Roles" 
					:class="{good: IsGood(item), bad: IsBad(item), me: Role === i+1}"
				>
					<th>{{i + 1}}</th>
					<td>{{item}}</td>
					<td :class="{good: IsGood(TestRoles[i].Values[TestRoles[i].Select]), bad: IsBad(TestRoles[i].Values[TestRoles[i].Select])}">
						<span>{{TestRoles[i].Values[TestRoles[i].Select]}}</span>
						<template v-if="TestRoles[i].Values.length > 1">
							<el-button icon="el-icon-d-arrow-right" 
								size="mini" 
								v-on:click="ChangeTestRole(TestRoles[i], 1)"
								style="float:right"
							></el-button>
							<el-button icon="el-icon-d-arrow-left" 
								size="mini" 
								v-on:click="ChangeTestRole(TestRoles[i], -1)"
								style="float:right"
							></el-button>
						</template>
					</td>
				</tr>
			</tbody>
		</table>
		</div>
		<el-row>
			<el-col :span="12" class="text-left">
				<el-button type="primary" v-on:click="Last" v-if="Turn > 1">上一局</el-button>
				&nbsp;
			</el-col>
			<el-col :span="12" class="text-right">
				<el-button type="primary" v-on:click="Next">下一局</el-button>
			</el-col>
		</el-row>
	</div>
</template>

</body>

</html>